<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标准模式下的块级元素的宽度如何计算</title>
</head>

<body>
    <script>
        //标准模式下的块级元素的宽度如何计算
        // 标准盒模型也叫W3C盒模型， 它设置的宽度和高度是对实际内容(content) 进行设置， border和padding另外设置的， 所以width(height)=设置的content的宽高 + padding + border +
        //     margin, 要注意的是除了content之外， 其他的上下左右都有的。

        // 顺便也说说怪异盒模型， 也叫IE盒模型， 它设置的width和height是对 实际内容(content) + padding + border + margin之和的width和height设置的， 盒模型的width(height) = content + padding + border + margin
    </script>
</body>

</html>